<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no">
    <title>小颜有点色</title>
    <link rel="stylesheet" type="text/css" href="https://s.momocdn.com/w/css/2017/01/10/1484040996423-CPd074ae63ddbacc4a2e8289862598ae50.css" >
    <style>
      html {
        font-size: 16px;
      }
      * {
        box-sizing: border-box;
      }
      body {
        font-family: sans-serif;
        margin: 0;
      }

      #picker {
        background-color: white;
        box-shadow: 0 .5rem 1rem -.25rem lightgray;
        margin: 2rem 0 1rem;
        padding: 1rem;
      }
      #picker h1 {
        font-weight: 100;
        line-height: 1;
        margin: 0 0 1rem;
        color: gray;
      }

      input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        background-color: currentColor;
        background-origin: content-box;
        background-repeat: no-repeat;
        border-radius: 2rem;
        display: block;
        color: inherit;
        height: 3rem;
        margin: 0 0 1rem;
        padding: 0;
        width: 100%;
      }
      input[type="range"]:focus {
        outline: none;
      }
      input[type="range"]::-moz-range-track {
        background-color: transparent;
      }
      input[type="range"]::-webkit-slider-runnable-track {
        margin: 0 -1rem;
      }
      input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        background-color: transparent;
        border-radius: 100%;
        box-shadow:
          inset 0 0 0 .125rem currentColor,
          inset 0 0 0 .25rem white;
        height: 2rem;
        width: 2rem;
      }
      input[type="range"]::-moz-range-thumb {
        background-color: transparent;
        border: 0;
        border-radius: 100%;
        box-shadow:
          inset 0 0 0 .125rem currentColor,
          inset 0 0 0 .25rem white;
        height: 2rem;
        width: 2rem;
      }
      #sample {
        border-radius: 2rem;
        height: 3rem;
        text-align: right;
        padding: .33rem 1rem;
        width: 100%;
      }
      #sample div {
        cursor: pointer;
        font-size: .75rem;
        font-weight: 100;
        line-height: 1.5em;
      }
      #sample div:hover {
        text-decoration: underline;
      }
      #sample .white {
        color: white;
      }
      #sample .black {
        color: black;
      }

      #hsl-h {
        background-image: linear-gradient(
          to right,
          #F00,
          #FF0,
          #0F0,
          #0FF,
          #00F,
          #F0F,
          #F00
        );
      }

      #hsl-s {
        background-image: linear-gradient(
          to right,
          #888,
          transparent
        );
      }
      #hsl-l {
        background-image: linear-gradient(
          to right,
          #000,
          transparent,
          #FFF
        );
      }

      @media screen and (min-width: 42rem) {
        #picker {
          width: 42rem;
          margin: 2rem auto 1rem;
        }
      }


      #navigation {
        width: 90%;
        margin: 3rem auto;
      }
      .nav-item {
        text-align: center;
        width: 10rem;
        display: inline-block;
        background: #eee;
        box-shadow: 0px 3px 10px #999;
        margin: 1rem;
        transition: transform .4s;
        border-radius: 3px;
      }
      .nav-item:hover {
        transform: scale(1.07);
      }
      .nav-item-con {
        display: inline-block;
      }
      .nav-item .extra {
        width: 10rem;
        overflow: hidden;
      }
      .nav-item .bd {
        height: 3rem;
        line-height: 3rem;
        /*background: #eee;*/
      }
    </style>
  </head>
  <body>
    <section id="picker">
      <h1>小颜有点色</h1>

      <input type="range" min="0" step="0.1" max="360" id="hsl-h">
      <input type="range" min="0" step="0.1" max="100" id="hsl-s">
      <input type="range" min="0" step="0.1" max="100" id="hsl-l">
      <div id="sample"></div>
    </section>
    <section id="navigation">
        <ul>
          <li class="nav-item">
            <a href="#" class="nav-item-con">
              <div class="extra">
                <img src="http://cdnst.momocdn.com/w/u/img/2017/02/15/1487128276975-girl_2.jpeg" >
              </div>
              <div class="bd">
                喜欢这样的女子
              </div>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-item-con">
              <div class="extra">
                <img src="http://cdnst.momocdn.com/w/u/img/2017/02/15/1487128278057-girl_hair.jpeg" >
              </div>
              <div class="bd">
                喜欢这样的女子
              </div>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-item-con">
              <div class="extra">
                <img src="http://cdnst.momocdn.com/w/u/img/2017/02/15/1487128278437-girl_flower.jpeg" >
              </div>
              <div class="bd">
                喜欢这样的女子
              </div>
            </a>
          </li>
        </ul>
    </section>
    <script>
      console.clear();

      var picker = {
      container: document.getElementById("picker"),
      sample: document.getElementById("sample")
      };

      var colors = {
      h: 320,
      s: 80,
      l: 50,
      textColor: function() {
        return this.l > 42 ?
          "black" :
          "white";
      },
      hueValue: function() {
        return Math.floor(this.h);
      },
      satValue: function() {
        return Math.floor(this.s) + "%";
      },
      lumValue: function() {
        return Math.floor(this.l) + "%";
      },
      getHSLString: function() {
        return "hsl(" + [
          colors.hueValue(),
          colors.satValue(),
          colors.lumValue()
        ].join(", ") + ")";
      },
      getHueLumString: function() {
        return "hsl(" +
          colors.hueValue() + ", 100%, " +
          colors.lumValue() + ")";
      },
      getHueSatString: function() {
        return "hsl(" +
          colors.hueValue() + ", " +
          colors.satValue() + ", 50%)";
      }
      };

      picker.sliders = Array.from(
      picker.container.querySelectorAll("input[type='range']")
      );

      picker.sliders.forEach(function(p, i) {
      p.addEventListener("input", handleSliderChange);
      initSlider(p);
      });

      function handleSliderChange() {
      var sliderType = this.id.split("hsl-")[1];
      if(sliderType === "h") {
        colors.h = this.value;
      } else if(sliderType === "s") {
        colors.s = this.value;
      } else if(sliderType === "l") {
        colors.l = this.value;
      }
      updateColors();
      }

      function fixChromeRepaintIssue(event) {
      var updateable = picker.sliders;
      if(event.type !== "mouseup") {
         updateable = picker.sliders.filter(function(el) {
          return el !== event.target;
        });
      }
      updateable.forEach(forceRepaint)
      }

      function forceRepaint(element) {
      element.style.display='none';
      element.offsetHeight;
      element.style.display='';
      }

      function updateColors() {
      picker.sliders.forEach(updateColor);
      }

      function updateColor(color) {
      picker.sliders[0].style.color = colors.getHSLString();
      picker.sliders[1].style.color = colors.getHueLumString();
      picker.sliders[2].style.color = colors.getHueSatString();
      picker.sample.style.backgroundColor = colors.getHSLString();
      picker.sample.innerHTML = getColorValuesHTML();
      }

      function getColorValuesHTML() {
      return [
        "<div class=\"" + colors.textColor() + "\">",
        [
          colors.getHSLString(),
          window.getComputedStyle(picker.sliders[0]).color
        ].join("</div><div class=\"" + colors.textColor() + "\">"),
        "</div>"
      ].join("");
      }

      function initSlider(s) {
      if(s.id==="hsl-h") {
        s.value = colors.h;
      } else if(s.id ==="hsl-s") {
        s.value = colors.s;
      } else if(s.id ==="hsl-l") {
        s.value = colors.l;
      }
      updateColors();
      }
    </script>
  </body>
</html>
